<template>
  <div class="messageList">
    <vxe-table border stripe :loading="loading" :align="allAlign" :data="tableData" @cell-click="cellClickEvent">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="msgId" title="消息唯一标识" width="200"></vxe-table-column>
      <vxe-table-column field="msg" title="消息体" width="200" show-overflow="ellipsis"></vxe-table-column>
      <vxe-table-column field="exchange" title="交换机" width="150"></vxe-table-column>
      <vxe-table-column field="routingKey" title="路由键" width="150"></vxe-table-column>
      <vxe-table-column field="status" title="状态" :formatter="formatterStatus" width="150"></vxe-table-column>
      <vxe-table-column field="tryCount" title="重试次数" width="150"></vxe-table-column>
      <vxe-table-column field="nextTryTime" title="下一次重试时间" width="150"></vxe-table-column>
      <vxe-table-column field="gmtCreated" title="创建时间" width="200"></vxe-table-column>
      <vxe-table-column field="gmtModified" title="更新时间" width="200"></vxe-table-column>
      <vxe-table-column field="returnCallbackStatus" title="回调状态" :formatter="callbackStatus" width="150"></vxe-table-column>
      <vxe-table-column field="remart" title="备注" width="150"></vxe-table-column>
    </vxe-table>
    <vxe-modal v-model="showDetails" title="消息体详情" width="600" height="320" :mask="false" :lock-view="false" resize>
      <div class="detail">{{detail}}</div>
    </vxe-modal>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
  import Vue from 'vue'
  import 'xe-utils'
  import Qs from 'qs'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  Vue.use(VXETable, VXEUtils, XEUtils, {mounts: ['cookie']})
  import { msgLog } from '@/api/basicInfo'
export default {
 data() {
    return {
      allAlign: null,
      detail:'',
      tableData: [
      ],
      loading: false,
      listQuery:{
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      authStatus:['投递中', '投递成功', '投递失败', '已消费'],
      callStatus:['成功','失败'],
      showDetails:false
    };
  },
  created(){
    this.getOrderList()
  },
  methods: {
    getOrderList(){
        this.loading = true;
        msgLog(Qs.stringify(this.listQuery)).then(response => {
            this.loading = false;
            this.tableData = response.data.records
            this.listQuery.total = response.data.total
        })
    },
    // 分页
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.getOrderList()
    },
    // 翻译状态
    formatterStatus({cellValue}) {
        return this.authStatus[cellValue] || ''
    },
    // 翻译状态
    callbackStatus({cellValue}){
        return this.callStatus[cellValue] || ''
    },
    cellClickEvent ({ column, row }) {
      if(column.title === '消息体'){
        this.detail = row.msg
        this.showDetails = true
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.messageList{
  padding: 30px;
}
.detail{
  word-wrap: break-word;
}
</style>
